<template>
  <div class="bar-wapper">
    <img src="@/assets/img/panel/titleInventoryTaskNum.png" width="460" alt="" />
    <div class="chart-box">
      <div class="box-item" v-for="(item, index) in state.data" :key="index">
        <p class="date">
          <span>{{ item.date }}</span>
          <span>{{ item.inventoryTaskNum }} / {{ item.passRate }}</span>
        </p>
        <div class="underline" :style="{ width: item.passRate }"></div>
        <div class="underline-back"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, watch, reactive } from 'vue';

const props = defineProps({
  data: {
    type: Array
  }
});
const state = reactive({
  data: []
});
watch(
  () => props.data,
  (newVal) => {
    newVal && createPieChart();
  }
);

function createPieChart() {
  const data = JSON.parse(JSON.stringify(props.data));
  state.data = data.sort((a: any, b: any) => new Date(a.date).getTime() - new Date(b.date).getTime());
}
</script>
<style lang="less" scoped>
.bar-wapper {
  width: 460px;
  height: 312px;
  display: flex;
  flex-direction: column;
  .chart-box {
    height: 100%;
    background: rgba(28, 53, 80, 0.49);
    padding: 0 17px;
    .box-item {
      position: relative;
      .date {
        display: flex;
        justify-content: space-between;
        color: #01b5ff;
        line-height: 36px;
        span:first-child {
          color: #fff;
        }
      }
      .underline {
        position: relative;
        height: 4px;
        width: 0px;
        transition: width 0.3s ease;
        background: linear-gradient(270deg, #27a0ff 0%, rgba(104, 201, 254, 0.16) 100%);
      }
      .underline::after {
        content: '';
        position: absolute;
        top: -3px;
        right: -6px;
        display: block;
        width: 9px;
        height: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #01b5ff 100%);
        transform: skewY(-36deg) rotate(36deg); /* 将元素上下边沿水平平行地倾斜 */
        transform-origin: center center;
      }
      .underline-back {
        content: '';
        display: block;
        height: 4px;
        width: 100%;
        position: absolute;
        bottom: 0;
        background: rgba(196, 210, 216, 0.15);
      }
    }
  }
}
</style>
